<!-- 碳排放强度 -->
<template>
  <div class="strength_container">
    <div class="title"></div>
    <div class="box" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
//获取DOM节点
let charts = ref()
onMounted(() => {
  let mycharts = echarts.init(charts.value)
  mycharts.setOption({
    //x|y轴组件
    xAxis: {
      type: 'category', //图形图标在x轴均匀分布展示
      data: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月',
      ],
      // 隐藏 x 轴刻度线
      axisTick: {
        show: false,
      },
      axisLabel: {
        // 设置 x 轴字体颜色为#7691C8
        color: '#7691C8',
        fontSize: 12,
        lineHeight: 14,
        // margin: 50
      },
    },
    yAxis: {
      type: 'value', // 明确 y 轴为数值轴
      min: 0,
      max: 2500,
      interval: 500,
      // 隐藏 y 轴刻度线
      axisTick: {
        show: false,
      },
      axisLabel: {
        // 设置 y 轴字体颜色为红色
        color: '#8EA8DC',
        fontSize: 16,
        lineHeight: 18,
        // 自定义 y 轴刻度标签的显示格式
        formatter: function (value: any) {
          return value
        },
      },
      name: '单位：吨CO2/万元',
      // 单位的位置，设置为 'middle' 让单位显示在 y 轴正上方中间
      // nameLocation: 'middle',
      // 单位与 y 轴的间距
      nameGap: 15,
      // 单位的文本样式
      nameTextStyle: {
        color: '#8EA8DC',
        fontSize: 14,
      },
      splitLine: {
        show: false,
      },
    },
    //布局组件
    grid: {
      left: 90,
      bottom: 74,
      right: 20,
    },
    //系列:决定显示图形图标是哪一种的
    series: [
      {
        type: 'bar',
        data: [
          1350, 2000, 1650, 1500, 1670, 850, 500, 300, 1000, 800, 700, 600,
        ],

        barWidth: 12,
        //设置柱条底部背景颜色
        showBackground: true,
        barBackgroundStyle: {
          color: '#274783', // 设置柱条底部背景颜色
        },
        //柱条的样式
        itemStyle: {
          borderRadius: [8, 8, 0, 0],
          //柱条颜色
          color: function (data: any) {
            //给每一个柱条这是背景颜色
            let arr = [
              '#0195F7',
              '#0195F7',
              '#0195F7',
              '#0195F7',
              '#0195F7',
              '#0195F7',
              '#0195F7',
              '#0195F7',
              '#0195F7',
              '#0195F7',
              '#0195F7',
              '#0195F7',
            ]
            return arr[data.dataIndex]
          },
        },
      },
      {
        type: 'bar',
        data: [
          2000, 800, 2000, 1600, 1100, 600, 1200, 800, 2200, 500, 2300, 1500,
        ],
        barWidth: 12,
        //设置柱条底部背景颜色
        showBackground: true,
        barBackgroundStyle: {
          color: '#274783', // 设置柱条底部背景颜色
        },
        //柱条的样式
        itemStyle: {
          borderRadius: [10, 10, 0, 0],
          //柱条颜色
          color: function (data: any) {
            //给每一个柱条这是背景颜色
            let arr = [
              '#39DF9C',
              '#39DF9C ',
              '#39DF9C',
              '#39DF9C',
              '#39DF9C',
              '#39DF9C',
              '#39DF9C',
              '#39DF9C',
              '#39DF9C',
              '#39DF9C',
              '#39DF9C',
              '#39DF9C',
            ]
            return arr[data.dataIndex]
          },
        },
      },
      {
        type: 'line',
        data: [
          1350, 2000, 1650, 1500, 1670, 850, 500, 300, 1000, 800, 700, 600,
        ],
        // 折线颜色
        lineStyle: {
          color: '#0195F7',
          width: 1, // 调整线的粗细
        },
        showSymbol: false,
      },
      {
        type: 'line',
        data: [
          2000, 800, 2000, 1600, 1100, 600, 1200, 800, 2200, 500, 2300, 1500,
        ],
        // 折线颜色
        lineStyle: {
          color: '#39DF9C ',
          width: 1,
        },
        // 隐藏数据点
        showSymbol: false,
      },
    ],
    tooltip: {
      backgroundColor: 'rgba(50,50,50,0.7)',
    },
  })
})
</script>
<style lang="scss" scoped>
.strength_container {
  display: flex;
  flex-direction: column;
  .title {
    width: 784px;
    height: 66px;
    background: url(../../../../assets/svg/tanpaifangqiangdu.svg) no-repeat;
  }
  .box {
    width: 750px;
    height: 281px;
    margin-left: 24px;
    background: linear-gradient(
      180deg,
      rgba(17, 56, 118, 0.28) 0%,
      #112241 100%
    );
  }
}
</style>
